<template>
	<view class="wuyepay">
		<!-- 顶部 -->
		<view class="u-padding-30 head">
			<view class="u-font-32 u-margin-bottom-22">2期-10-1-604</view>
			<view class="u-font-26 u-margin-bottom-22">房屋面积：3㎡</view>
			<view class="u-font-26 u-margin-bottom-22">单价：11</view>
			<view class="u-font-26 u-margin-bottom-22">物业费：10.00元</view>
			<view class="btn" @click="show=true">
				预缴费用
			</view>
		</view>
		<!-- 主体内容 -->
		<view class="main">
			<view class="main_top"></view>
			<view class="mian_content u-padding-30 u-margin-bottom-34" >
				<view class="u-flex">
					<u-checkbox shape="circle" active-color="#F9A832" @change="changePay(item)"></u-checkbox>
					<view class="u-flex-1 u-margin-left-20">2020.12.12</view>
					<view>10.00</view>
				</view>
				<view class="u-flex u-margin-top-12">
					
				</view>
			</view>
		</view>
		<!-- footer -->
		<view class="foot">
			<view class="footer u-padding-left-30 u-flex">
				<view class="u-flex-1 u-margin-top-32">
					<u-checkbox shape="circle" v-model="allchecked" active-color="#F9A832" @change="selectAllBtn">全选</u-checkbox>
				</view>
				<view class="u-flex">
					<view class="u-m-t-32 u-font-32 u-m-r-20">合计：<text class="txet">￥10.00</text></view>
					<view class="button" @click="payBtn">缴费</view>
				</view>
			</view>
		</view>
		<!-- 弹出步进器 -->
		<u-popup v-model="show" mode="bottom" length="35%">
			<view class="bjq">
				<u-number-box v-model="num" :min="1" :input-width="100" :input-height="60"></u-number-box>
				<view class="u-flex u-row-between">
					<u-button size="medium" @click="cancel" :custom-style="customStyle">取消</u-button>
					<u-button type="warning" size="medium" @click="confirm" :custom-style="customStyle">确认</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num: 1,
				show: false,
				allchecked: false, //全选
				name: '',
				address: '',
				customStyle: {
					margin: '40rpx', // 注意驼峰命名，并且值必须用引号包括，因为这是对象

				},
				homelist: {},
				payList: {},
				//物业费合计
				payTotal: 0,
			}
		},
		onShow() {
			this.homelist = uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum') || 0]

			this.name = this.homelist.proName;
			this.address = this.homelist.buildDistrictCode + '-' + this.homelist.buildTowerCode + '-' + this.homelist.roomUnitNumber +
				'-' + this.homelist.roomCode
			this.getPayDetails()
		},
		methods: {
			async getPayDetails() {
				let res = await this.$request.api.payDetails({
					proId: this.homelist.proId,
					roomId: this.homelist.roomId,
					setId: this.homelist.setId,
				})
				this.payList = res.data.data
			},
			// 预缴费用
			async confirm() {
				let res = await this.$request.api.prePay({
					proId: this.homelist.proId,
					roomId: this.homelist.roomId,
					setId: this.homelist.setId,
					num: this.num
				})
				this.show = false
				if (res.status == 200) {
					this.getPayDetails()
				}
				this.num = 1;

			},
			async payBtn() {
				if (this.payTotal) {
					let periodList = [];
					this.payList.wuYeCost.filter(item => {
						item.wuyechecked && periodList.push(item)
					})
					let res = await this.$request.api.payOrder({
						allMoney: this.payTotal,
						roomId: this.homelist.roomId,
						phone: uni.getStorageSync('phone'),
						periodList: periodList,
						proId: this.homelist.proId,
					})
					this.$Router.push({path:'/pages/billdetails/billdetails',query:{id:res.data,money:this.payTotal}})
					this.payTotal=0;
					this.allchecked=false
				}

			},
			// 取消
			cancel() {
				this.num = 1;
				this.show = false
			},
			selectAllBtn() {
				let payArr = this.payList.wuYeCost;
				this.payTotal = 0;
				payArr.forEach(item => {
					if (this.allchecked == false) {
						item.wuyechecked = false
						this.payTotal = 0
					} else {
						if (!item.freeOrder) {
							item.wuyechecked = true
							this.payTotal = this.add(this.payTotal, item.allMoney)
						}
					}
				})
			},
			// 定义加法函数
			add() {
				let args = arguments, //获取所有的参数
					lens = args.length, //获取参数的长度
					d = 0, //定义小数位的初始长度，默认为整数，即小数位为0
					sum = 0; //定义sum来接收所有数据的和
				//循环所有的参数
				for (let key in args) {
					//遍历所有的参数
					//把数字转为字符串
					let str = '' + args[key];
					if (str.indexOf('.') != -1) {
						//判断数字是否为小数
						//获取小数位的长度
						let temp = str.split('.')[1].length;
						//比较此数的小数位与原小数位的长度，取小数位较长的存储到d中
						d = d < temp ? temp : d;
					}
				}
				//计算需要乘的数值
				let m = Math.pow(10, d);
				//遍历所有参数并相加
				for (let key in args) {
					sum += args[key] * m;
				}
				//返回结果
				return Number(sum / m).toFixed(2);
			},
			// 定义减法
			sub(num1, num2) {
				let r1, r2, m, n;
				try {
					r1 = num1.toString().split('.')[1].length;
				} catch (e) {
					r1 = 0;
				}
				try {
					r2 = num2.toString().split('.')[1].length;
				} catch (e) {
					r2 = 0;
				}
				m = Math.pow(10, Math.max(r1, r2));
				return (Math.round(num1 * m - num2 * m) / m).toFixed(2);
			},
			changePay(item) {
				let payArr = this.payList.wuYeCost;
				this.allchecked = true
				let a = 0;
				if (payArr.length > 0) {
					this.payTotal = 0;
					payArr.map((item) => {
						if (!item.freeOrder) {
							if (!item.wuyechecked) {
								this.allchecked = false;
							} else {
								this.payTotal = this.add(this.payTotal, item.allMoney)
							}
						}
					});
				} else {
					this.allchecked = true;
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.box {
		padding: 40rpx 20rpx;
		background: rgba(244, 244, 244, 1);
		border-radius: 6px;
		margin-top: 10rpx;

		view {
			display: inline-block;
			width: 50%;
			margin-bottom: 10rpx;
		}
	}

	.btn {
		text-align: center;
		width: 290rpx;
		height: 92rpx;
		border-radius: 50rpx;
		border: 1px solid rgba(249, 168, 50, 1);
		line-height: 92rpx;
		color: #F9A832;
		font-size: 32rpx;
		margin: 40rpx auto;
	}

	.head {
		border-top: 1px solid rgba(0, 0, 0, .1);
	}

	.main_top {
		height: 80rpx;
		background: rgba(244, 244, 244, 1);
	}

	.foot .footer {
		width: 100%;
		height: 136rpx;
		position: fixed;
		bottom: 0;
		z-index: 99;
		background: rgba(255, 255, 255, 1);
	}

	.txet {
		color: #FD3636;
	}

	.main {
		margin-bottom: 136rpx;
	}

	.button {
		width: 242rpx;
		height: 136rpx;
		line-height: 136rpx;
		text-align: center;
		background: linear-gradient(142deg, rgba(253, 211, 97, 1) 0%, rgba(249, 168, 50, 1) 100%);
		color: #fff;
	}

	.bjq {

		padding-top: 15%;
		padding-left: 60rpx;
		padding-right: 60rpx;

	}
</style>
<style lang="scss">
	.bjq {
		.u-numberbox {
			display: flex !important;
			justify-content: space-between !important;
			width: 100% !important;
			border-top: 1px solid #DCDCDC;
			border-bottom: 1px solid #DCDCDC;
			padding: 40rpx 0;
		}


		.u-number-input {
			background-color: #fff !important;
		}

	}
</style>
